<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="app">
        <div class="addcourse&price">
            课程:<input v-model='course'>
            价钱:<input v-model='price'>
            <button @click='addCourse'>添加课程</button>
        </div>
        <ul v-for='(items,index) in addArr'>
            <li>课程名称：{{items.courses}}--价格：{{items.prices}}
                <button @click="addCart(index)">添加到购物车</button>
            </li>

        </ul>

        <template>
            <div>
                <table border="1">
                    <thead>
                        <tr>
                            <th>选中</th>
                            <th>课程</th>
                            <th>数量</th>
                            <th>价格</th>
                        </tr>

                    </thead>
                    <tbody>
                        <tr v-for='(cousers,index) in cartArr'>

                            <td><input type="checkbox" v-model="cousers.selected"></td>
                            <td>{{cousers.courses}}</td>
                            <td>
                                <span @click='reduceCount(index)'>-</span>
                                {{cousers.count}}
                                <span @click='addCount(index)'>+</span>
                            </td>
                            <td>{{cousers.prices*cousers.count}}</td>
                        </tr>
                    <tfoot>
                        <tr>
                            <th scope="row" colspan="2">选中{{activecount}}/{{totalcount}}</th>
                            <td scope="row" colspan="2">总价格{{totalprice}}</td>
                        </tr>
                    </tfoot>
                    </tbody>
                </table>
            </div>
        </template>
    </div>
</body>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
    new Vue({
        el: '#app',
        props: ['course', 'price'],
        data: {
            addArr: [
                { courses: 'springcloud ', prices: 20 },
                { courses: 'h5 CSS3 JS ', prices: 120 }
            ],
            cartArr: []

        },

        computed: {

            //找出状态为selected的元素数组，返回其长度
            activecount: function () {
                return this.cartArr.filter(e => e.selected == true).length;
            },
            totalcount: function () {
                return this.cartArr.length;
            },
            //先返回状态为selected的元素数组，在进行遍历进行价格叠加
            totalprice: function () {
                var totalprice=0;
                this.cartArr.filter(e => e.selected == true).forEach(e => {
                   
                  console.log(e.selected);  
                    if (e.selected) {
                         totalprice+=e.count*e.prices
                    }
                } 
                )
                
              return totalprice;
            }
        },
        methods: {

            //在按下-号后记录下索引值，并进行数量的判断
            //count==1为临界条件，为1时再点击就要判断是否删除对应项
            reduceCount: function (index) {

                var count = this.cartArr[index].count;
                if (count > 1) {
                    this.cartArr[index].count--;
                } else {
                    if (window.confirm(`是否清空${this.cartArr[index].courses}`)) {
                        // splice(start, deleteCount, item1),item1为删除位置的替补元素
                        this.cartArr.splice(index, 1);
                    }


                }
            }
            ,
            addCount: function (index) {
                this.cartArr[index].count++;
            },

            addCourse: function () {
                this.addArr.push({ courses: this.course, prices: this.price });
                this.course = '';
                this.price = 0;

            },
            //加入购车时传入对应的索引
            addCart: function (index) {
                // console.log("this.addArr.index", this.addArr[index]);
                var addcourse = this.addArr[index];
                //便利cartArr，找到addcourse数组有元素在里面就返回这个对象，没有返回undefine
                var course = this.cartArr.find(e => e.courses == addcourse.courses);
                // console.log(course);
                if (course != null) {
                    //artArr有这个对象，就进行简单的+1；
                    course.count++;
                } else {
                    //artArr没有这个对象 就直接放入到cartArr中
                    this.cartArr.push({ selected: true, courses: addcourse.courses, count: 1, prices: addcourse.prices });
                }

            }
        }



    })
</script>

</html>